<div id="<%= page_id %>container"></div>
<script type="text/javascript">
  $(function () {
      $('#<%= page_id %>container').highcharts({
      	credits: false,
          chart: {
              type: 'line'
          },
          title: {
              text: '<%= chart_attrs[:name] %>'
          },
          xAxis: {
              categories: [
              	<% chart_attrs[:xaxis].each do |xax| %>
              		'<%= xax %>',
              	<% end %>
              ]
          },
          yAxis: {
              title: {
                  text: '<%= chart_attrs[:uom] %>'
              },
              min: 0
          },
          tooltip: {
              enabled: false,
              formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
                      this.x +': '+ this.y +'°C';
              }
          },
          plotOptions: {
              line: {
                  dataLabels: {
                      enabled: true
                  },
                  enableMouseTracking: false
              }
          },
          series: [
          	<% chart_attrs[:datas].each do |name,data| %>
            	{
            		name: '<%=name%>',
            		data:[<%=data.join(',')%>]
            	},
          	<% end %>
          ]
      });
  });

</script>